import React from 'react';
import './../../form.less';

import moment from 'moment';
import {Button, Col, Icon, Input, message, Popconfirm, Row, Tooltip} from 'antd';
import BreadcrumbCustom from "../../../common/BreadcrumbCustom";
import SettleParamTable from "./SettleParamTable";
import ItemCreateForm from "./SettleParamForm";

export default class SettleParam extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            pageSize: 5,
            total: 0,
            current: 1,
            linkUrl: '',
            visible: false, //新建窗口隐藏
            dataSource: [],
            selectedRowKeys: [],
            isUpdate: false,
            loading: true,
        };
    }

    //搜索条件
    onChangeLinkUrl = (e) => {
        const value = e.target.value;
        this.setState({
            linkUrl: value,
        })
    };

    pageSizeChange = (current, pageSize) => {
        this.setState({
            pageSize: pageSize,
            current: current
        },() => this.getData())
    }

    getData = () => {
        var url = '/manage/settleParam/query'
        const searchCondiction = new Object()
        searchCondiction.pageSize = this.state.pageSize;
        searchCondiction.pageNumber = this.state.current;
        if (this.state.linkUrl) {
            const conditionList = [];
            const condition = {
                code: "linkUrl",
                type: "String",
                operator: 1,
                value: this.state.linkUrl
            }
            conditionList.push(condition);
            searchCondiction.conditionList = conditionList;
        }
        fetch(url, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(searchCondiction)
        }).then((response) => {
            return response.json()
        }).then((res) => {
            console.log(res)
            if (res.code == 200) {
                this.setState({
                    datasource: res.result.list,
                    total:res.result.total,
                    loading: false
                });
            }
        })
    }

    //渲染
    componentDidMount() {
        this.getData();
    }

    //搜索按钮
    btnSearch_Click = () => {
        this.getData();
    };
    //重置按钮
    btnClear_Click = () => {
        this.setState({
            linkUrl: ''
        });
    };
    //新建信息弹窗
    CreateItem = () => {
        this.setState({
            visible: true,
            isUpdate: false,
        });
        const form = this.form;
        form.resetFields();
    };

    //更新修改
    handleUpdate = () => {
        const form = this.form;
        form.validateFields((err, values) => {
            if (err) {
                return;
            }
            console.log('Received values of form: ', values);
            var url = '/manage/settleParam/update'
            fetch(url, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(values)
            }).then((response) => {
                return response.json()
            }).then((res) => {
                if (res.code == 200) {
                    message.success("操作成功")
                    this.getData();
                } else {
                    message.success("操作失败")
                }
            })
            form.resetFields();
            this.setState({
                visible: false,
            });
        });
    };
    //取消
    handleCancel = () => {
        this.setState({visible: false});
    };

    //点击修改
    editClick = (key) => {
        const settleParam = this.state.datasource.filter(settleParam => settleParam.id == key)[0];
        const form = this.form;
        form.setFieldsValue({
            id:settleParam.id,
            percent:settleParam.percent,
            descrition_NotFileter:settleParam.descrition_NotFileter,
            beginDate:settleParam.beginDate,
            endDate:settleParam.beginDate
        });
        this.setState({
            visible: true,
            isUpdate: true,
        });
    };
    //单选框改变选择
    checkChange = (selectedRowKeys) => {
        this.setState({selectedRowKeys: selectedRowKeys});
    };

    render() {
        return (
            <div>
                <BreadcrumbCustom paths={['首页', '结算参数']}/>
                <div className='formBody'>
                    <Row gutter={16}>
                        <div className='btnOpera'>
                            <Button type="primary" onClick={this.btnSearch_Click}
                                    style={{marginRight: '10px'}}>查询</Button>
                            <Button type="primary" onClick={this.btnClear_Click}
                                    style={{background: '#f8f8f8', color: '#108ee9'}}>重置</Button>
                        </div>
                    </Row>
                    <SettleParamTable
                        dataSource={this.state.datasource}
                        checkChange={this.checkChange}
                        onDelete={this.onDelete}
                        editClick={this.editClick}
                        loading={this.loading}
                        pageSizeChange={this.pageSizeChange}
                        total={this.state.total}
                        pageSize={this.state.pageSize}
                        current={this.state.current}
                    />
                    {this.state.isUpdate ?
                        <ItemCreateForm ref={(form) => this.form = form} visible={this.state.visible}
                                          onCancel={this.handleCancel} onCreate={this.handleUpdate} title="修改结算参数"
                                          okText="更新"/>
                        : <ItemCreateForm ref={(form) => this.form = form} visible={this.state.visible}
                                            onCancel={this.handleCancel} onCreate={this.handleCreate} title="新建类目"
                                            okText="保存"/>}
                </div>
            </div>
        )
    }
}